<script>
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'DescItem',
	props: {
		label: {
			type: String,
			default: '',
		},
		nowrap: {
			type: Boolean,
			default: true,
		},
	},
	inject: ['labelWidth', 'align'],
	data() {
		return {
			isShow: true,
		};
	},
	mounted() {
		this.isShow = this.$refs.parent.offsetWidth < this.$refs.child.offsetWidth;
	},
});
</script>
<template>
	<li class="DescItem">
		<div class="label" :style="`width:${labelWidth};text-align:${align};`">{{ label }}</div>
		<el-tooltip placement="top" :disabled="!isShow">
			<template #content>
				<span> <slot></slot> </span>
			</template>
			<div ref="parent" :class="['content', { nowrap }]">
				<span ref="child">
					<slot></slot>
				</span>
			</div>
		</el-tooltip>
	</li>
</template>

<style lang="scss" scoped>
.DescItem {
	display: flex;
	line-height: 26px;
	white-space: normal;
	padding-bottom: 10px;
	.label {
		white-space: nowrap;
		margin-right: 10px;
	}
	.content {
		flex: 1;
		// .parent {
		//     overflow: hidden;
		//     text-overflow: ellipsis;
		//     white-space: nowrap;
		// }
	}
	.nowrap {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
}
</style>
